<!-- 预购收藏 -->
<template>
	<fui-tabs :tabs="tabs" center @change="onChange"></fui-tabs>
	<scroll-view scroll-y style="height: calc(100vh - 230rpx);">
		<view style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;background-color: #fff;border-radius: 10rpx;padding: 20rpx;margin: 20rpx;margin-bottom: 0;position: relative;" v-for="(item, index) in 6" :key="index" @click="onNavOrder">
			<view style="padding: 0 30rpx;" v-if="tabIndex == 0">
				<fui-checkbox :checked="true"></fui-checkbox>
			</view>
			<view style="margin-left: 20rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
				<image src="../../static/images/tu1.jpg" style="width: 200rpx;height: 200rpx;border-radius: 10rpx;"></image>
				<view style="margin-left: 20rpx;">
					<view style="font-size: 30rpx;">
						小程序昵称
					</view>
					<view style="font-size: 26rpx;color: #999;margin-top: 16rpx;">
						作者：安腾
					</view>
					<view style="font-size: 30rpx;color: #ff0000;margin-top: 16rpx;">
						￥999.99
					</view>
				</view>
				<view style="position: absolute;right: 30rpx;top: 20rpx;font-size: 28rpx;color: #d6d6d6;" v-if="tabIndex == 1">
					已购买
				</view>
			</view>
		</view>
	</scroll-view>

	<view class="bottom-box">
		<view style="display: flex;justify-content: start;align-items: center;;">
			<fui-checkbox :checked="true"></fui-checkbox>
			<view style="margin-left: 10rpx;font-size: 26rpx;">
				全选
			</view>
		</view>
		
		<view  style="display: flex;justify-content: end;align-items: flex-end;">
			<view style="margin-right: 25rpx;font-size: 26rpx;">
				合计：￥<text style="font-size: 46rpx;">999</text>.99
			</view>
			<button class="pay-btn" @click="onPay">立即购买</button>
		</view>
	</view>
</template>

<script setup>
	
	import { ref } from "vue";
	
	const tabs = ref([{name: '预购收藏'},{name: '已购买'}])
	const tabIndex = ref(0)
	
	const onChange = (event) => {
		console.log(event)
		tabIndex.value = event.index;
	}
	
	const onPay = () => {
		// uni.navigateTo({
		// 	url: '/view/preOrderCollect/orderDetail'
		// })
	}
	
	const onNavOrder = () => {
		console.log('tabIndex.value' , tabIndex.value )
		if (tabIndex.value == 0) {
			uni.navigateTo({
				url:`/view/blueOceanworld/applyDetail`
			})
		}
		
		if (tabIndex.value == 1) {
			uni.navigateTo({
				url:`/view/preOrderCollect/orderDetail`
			})
		}
	}
</script>

<style lang="scss">
	.bottom-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 10px;
		right: 10px;
		bottom: 10px;
		background-color: #fff;
		height: 80rpx;
		padding: 5px 15px;
		border-radius: 25px;
		box-shadow: 0px 0px 4px 1px #d5d5d5;
	}
	.pay-btn {
		width: 200rpx;
		height: 75rpx;
		font-size: 26rpx;
		border-radius: 50rpx;
		line-height: 75rpx;
		background-color: #005dff;
		color: #fff;
		&::after {
			border: none;
		}
	}
</style>